<template>
    <el-card>
        <el-row class="tips">
            <p><i class="iconfont icon-tips"></i> 留言说明: </p>
            <p>务必填写有效的邮箱地址，否则不会收到回复信息的~</p>
        </el-row>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-row class="form-top">
                <el-form-item label="昵称" prop="name" label-width='70px'>
                    <el-input v-model="ruleForm.name" style="width:90%" placeholder="请输入昵称"></el-input>
                    <el-button class="iconfont icon-random" title="随机昵称" @click="randomNickname" circle></el-button>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" label-width='70px'>
                    <el-input v-model="ruleForm.email" placeholder="请输入有效邮箱地址"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item style="height:400px;border:none" label="内容" prop="content" label-width='70px' class="">
                    <!-- <el-input type="textarea" :rows="10" v-model="ruleForm.content" placeholder="Please writing your mind"></el-input> -->
                    <QuillEditor :value='ruleForm.content' @listenToChildEvent="showMsgFromChild"></QuillEditor>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label-width='70px'>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-row class="commnet-total">
            <span>共{{ count || 0 }}条评论</span>
        </el-row>
        <scroll-page :loading="loading" :offset="offset" :no-data="noData" @load="load">
            <el-row class="commnets">
                <div v-for="(comment, index) in comments" :key="index" class="item">
                    <div class="left">
                        <avatar class="header-img" :size="40" :username="comment.nickname"></avatar>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <span class="user">{{ comment.nickname }}</span>
                            <span class="sys">{{ comment.os || 'Win10' }}</span>
                            <span class="exe">{{ comment.explore || 'Chrome 81.0.4044.9' }}</span>
                            <span class="time">{{ comment.create_time }}</span>
                        </div>
                        <div class="right-bottom">
                            <div class="content" v-html="comment.content"></div>
                            <div v-if="comment.reply != null" class="reply">
                                <div class="content"><i>站长回复：</i> <span v-html="comment.reply"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-row>
            <el-row :class="isShow">没有更多了~</el-row>
        </scroll-page>
    </el-card>

</template>
<script>
import Avatar from 'vue-avatar'
import ScrollPage from './ScrollPage'
import QuillEditor from './QuillEditor'
import { Throttle } from '@/utils/func'
import { getRandomName } from '@/utils/rand_nick'

export default {
    name: 'CommentDom',
    components: {
        Avatar,
        ScrollPage,
        QuillEditor
    },
    props: {
        params: {
            type: Object,
            required: true
        },
        offset: {
            type: Number,
            default: 100
        },
        page: {
            type: Object,
            default() {
                return {}
            }
        },
        query: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            ruleForm: {
                name: '',
                email: '',
                content: '',
                article_id: this.params.article_id
            },
            rules: {
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', required: true, message: '请输入有效邮箱地址', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '随便吐槽两句吧~', trigger: 'blur' }
                ]
            },

            loading: false,
            noData: false,
            innerPage: {
                pageSize: 10,
                pageNo: 1,
            },
            comments: [],
            isShow: 'hide',
            count: 0,
            button_status: 0,
            Q: {}
        }
    },
    watch: {
        'query': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage.pageNo = 1
                this.getArticles()
            },
            deep: true
        },
        'page': {
            handler() {
                this.noData = false
                this.articles = []
                this.innerPage = this.page
                this.getArticles()
            },
            deep: true
        },
    },
    created() {
        this.getMessage()
        this.randomNickname()
    },

    methods: {
        randomNickname() {
            this.ruleForm.name = getRandomName(3)
        },
        load() {
            this.getMessage()
        },
        showMsgFromChild(data) {
            this.ruleForm.content = data;
        },
        getMessage() {
            this.loading = true
            this.Q.page = this.innerPage.pageNo;
            this.Q.size = this.innerPage.pageSize;
            this.Q.article_id = this.params.article_id;
            this.$Api.getMessage(this.Q).then(res => {
                let newMessage;
                if (this.innerPage.pageNo === 1) {
                    newMessage = res.data.data
                    this.count = res.data.count;
                } else {
                    newMessage = res.data
                }

                if (newMessage && newMessage.length > 0) {
                    this.innerPage.pageNo += 1
                    this.comments = this.comments.concat(newMessage)
                    this.isShow = 'hide'

                } else {
                    this.noData = true
                    this.isShow = 'show'
                }
            }).catch(error => {
                if (error !== 'error') {
                    this.$message({ type: 'error', message: '评论加载失败!', showClose: true })
                }
            }).finally(() => {
                this.loading = false
            })
        },
        submitForm: Throttle(function (formName) {
            this.button_status = -1;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.os = this.funcs.getOS();
                    this.ruleForm.explore = this.funcs.getExplore()
                    this.$Api.addMessage(this.ruleForm).then(res => {
                        if (res.code !== 200) {
                            this.$message({ type: 'error', message: res.msg, offset: 100 });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'success',
                                offset: 100
                            });
                            this.innerPage.pageNo = 1;
                            this.comments = [];
                            this.load()
                            this.resetForm('ruleForm')
                            // this.$forceUpdate();
                        }
                        this.button_status = 0;
                    })
                } else {
                    this.button_status = 0;
                    return false;
                }

            });
        }, 100),
        
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.button_status = 0;
        },
        dateStr(date) {
            // 获取js 时间戳
            let time = new Date().getTime();
            // 去掉 js 时间戳后三位，与php 时间戳保持一致
            time = parseInt((time - date) / 1000);
            // 存储转换值 
            let s;
            if (time < 60 * 10) {// 十分钟内
                return '刚刚';
            } else if ((time < 60 * 60) && (time >= 60 * 10)) {
                // 超过十分钟少于1小时
                s = Math.floor(time / 60);
                return s + "分钟前";
            } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
                // 超过1小时少于24小时
                s = Math.floor(time / 60 / 60);
                return s + "小时前";
            } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
                // 超过1天少于30天内
                s = Math.floor(time / 60 / 60 / 24);
                return s + "天前";
            } else {
                // 超过30天ddd
                const ddate = new Date(parseInt(date));
                return ddate.getFullYear() + "/" + (ddate.getMonth() + 1) + "/" + ddate.getDate();
            }
        }
    },
}
</script>
<style lang="less" scoped>
.show {
    display: block;
    text-align: center;
}

.hide {
    display: none;
}

.el-form {
    width: 100%;

    .form-top {
        width: 100%;
        display: flex;

        .el-form-item {
            flex: 1;
        }
    }
}

.commnet-total {
    color: #303133;
    line-height: 36px;
}

.tips {
    line-height: 2;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid #ccc;
    margin: 0 0 20px 0;

    .icon-tips {
        font-size: 18px;
        color: #f00;
        font-weight: bold;
    }

}

.commnets {
    width: 100%;

    .item {
        width: 100%;
        display: flex;
        padding: 20px 10px;
        box-sizing: border-box;
        border-bottom: #ececec 1px solid;

        .left {
            width: 6%;
        }

        .right {
            width: 94%;

            .right-top {
                width: 100%;
                display: flex;

                span {
                    line-height: 30px;
                }

                .user {
                    color: #1abc9c;
                    margin-right: 10px;
                }

                .sys,
                .exe {
                    text-align: center;
                    font-size: 12px;
                    background-color: #ededed;
                    padding: 0 10px;
                    margin-right: 10px;
                }

                .time {
                    flex: 1;
                    text-align: right;
                    color: #999;
                    font-size: 12px;
                }
            }

            .right-bottom {
                padding: 10px 0;
                line-height: 2;

                :deep(.content) {
                    padding-bottom: 10px;
                    width: 100%;
                    img {
                        width: 10%;
                    }
                }

                .reply {
                    display: flex;
                    padding-top: 10px;
                    border-top: #ececec 1px solid;

                    .content {
                        border-bottom: none;

                        i {
                            color: rgb(255, 0, 0)
                        }
                        img{
                            width: 10%;
                        }

                    }
                }
            }
        }
    }
}
</style>
